<template>
  <view class="flex-col justify-start section_3 pos">
    <view class="flex-col section_6">
      <text class="self-center font_3 text_4">Remind</text>
      <view class="mt-32 flex-col self-stretch">
        <text class="font_2 text_5">
          You have configured the on-chain address, please check carefully and click Confirm
        </text>
        <view class="mt-12 flex-row section_7">
          <text class="font_4 flex align-center">Address:</text>
          <u-input class="input-address" placeholder="Please fill in your on-chain address..."
            v-model="address"></u-input>
        </view>

      </view>
      <view class="mt-32 flex-row self-stretch">
        <view class="flex-col justify-start items-center text-wrapper_2" @click="handleClose"><text
            class="text_6">Cancel</text></view>
        <view class="flex-col justify-start items-center text-wrapper_3 ml-31" :disabled="isLoading" @click="handleOk">
          <text class="font_3 text_7">Confirm{{ countDownTips }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    address: {
      type: String,
      required: true,
      default: ''
    },
  },

  components: {},
  data() {
    return {
      isLoading: true,
      countDownTime: 5,
      countDownTips: '(5s)',
      interval: null,
    };
  },
  destroyed() {
    clearInterval(this.interval)
    this.interval = null
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleOk() {
      if (!this.isLoading) {
        this.$emit('confirm')
      }

    },
    handleCountDownTime() {
      this.isLoading = true
      this.countDownTips = `(${this.countDownTime}s)`
      this.interval = setInterval(() => {
        if (this.countDownTime < 1) {
          this.countDownTips = ''
          this.countDownTime = 60
          this.isLoading = false
          clearInterval(this.interval)
          this.interval = null
          return
        }

        this.countDownTime--
        this.countDownTips = `(${this.countDownTime}s)`
      }, 1000)
    },
  },
};
</script>

<style scoped lang="scss">
.ml-31 {
  margin-left: 1.94rem;
}

.section_3 {
  padding: 15.88rem 0;
  background-color: #000000cc;

  .section_6 {
    margin: 0 1rem;
    padding: 1.63rem 1rem 1.25rem;
    border-radius: 1.5rem;
    background-image: url('/web/static/common/dialog_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .font_3 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.93rem;
      color: #ffffff;
    }

    .text_4 {
      line-height: 0.74rem;
    }

    .font_2 {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.7rem;
      color: #ffffff;
    }

    .text_5 {
      color: #00f6ff;
      line-height: 0.88rem;
    }

    .section_7 {
      padding: 1rem 0.75rem;
      background-color: #ffffff1a;
      border-radius: 0.5rem;

      .input-address {
        padding: 6px 9px;
        width: 95%;
        height: 100%;
        border: none;

        /deep/ .uni-input-input {
          caret-color: red;
          caret-width: 3px;
          font-size: 1rem;
          font-family: PingFang SC;
          line-height: 0.93rem;
          color: #ffffff;
        }
      }

      .font_4 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff80;
      }

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff;
      }
    }

    .text-wrapper_2 {
      padding: 1.13rem 0;
      flex: 1 1 8.75rem;
      background-color: #ffffff33;
      border-radius: 0.75rem;
      backdrop-filter: blur(1rem);
      height: 3rem;

      .text_6 {
        color: #ffffffb3;
        font-size: 1rem;
        font-family: PingFang SC;
        line-height: 0.74rem;
      }
    }

    .text-wrapper_3 {
      padding: 1.13rem 0;
      flex: 1 1 8.75rem;
      background-image: linear-gradient(113.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 0.75rem;
      height: 3rem;

      .text_7 {
        line-height: 0.93rem;
      }
    }
  }
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>